<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:49:12
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-23 19:33:02
 * @FilePath: /tea-garden-web/src/pages/overview/subject-disease.vue
 * @Description: 专题-病虫害管理 原本备份
-->
<template>
  <div class="subject-disease">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <span class="module-name">病虫害管理</span>
      <div class="subject-content">
        <!-- <component-subject-button-group
          :buttons="types"
          :active="activeType"
          @change="setActiveType"
        /> -->
        <el-row class="title-area">
          <el-col :span="12" class="title">压力指数</el-col>
          <el-col :span="12" class="subtitle" v-if="list.length">
            {{ list[0].createTime || "--" }}
          </el-col>
        </el-row>
        <div class="info-box-1">
          <section class="info-box-1" v-if="list.length">
            <section class="status-box"></section>
            <span class="status-label">当前状态</span>
            <!-- <span
              class="status-value"
              :style="{ color: color[diseaseStatistics.degree_status] }"
            >
              {{ getDictItemNameById(diseaseStatistics.degree_status) || "--" }}
            </span> -->
            <span
              class="status-value"
              :style="{ color: colorChange[bgLevel[list[0].level]] }"
            >
              {{ levelList[list[0].level] || "--" }}
            </span>
            <i
              class="status-icon"
              :class="[`select-status-${bgLevel[list[0].level]}`]"
            />
            <!-- 根据字段匹配图片 -->
            <i
              class="level-bg"
              :class="[`select-level-${bgLevel[list[0].level]}`]"
            ></i>
            <span
              class="status-value2"
              :style="{ color: colorChange[bgLevel[list[0].level]] }"
            >
              <span>{{ list[0].level || "--" }}</span>
            </span>
            <span
              class="status-value3"
              :style="{
                background: colorChange[bgLevel[list[0].level]],
              }"
            >
              {{ list[0].level }}
            </span>
          </section>
        </div>
        <el-row class="title-area">
          <el-col :span="12" class="title">趋势变化</el-col>
        </el-row>
        <component-line-chart :data="list" v-if="list.length" />
        <!-- <section style="width: 273px; height: 225px;" v-else v-loading="loading.diseaseTrend" />
        <el-row class="title-area">
          <el-col :span="12" class="title">压力分布</el-col>
        </el-row>
        <component-radial-bar
          :data="diseaseDistribute"
          v-if="!loading.diseaseDistribute"
        />
        <section style="width: 137px; height: 130px;" v-else v-loading="loading.diseaseDistribute" /> -->
      </div>

      <!-- <component-suggestion :methods-type="'getDiseaseAdvice'" /> -->
    </div>
  </div>
</template>

<script>
// import { mapActions, mapMutations, mapGetters, mapState } from 'vuex'
import { colorChange } from '@/util/dict.js'
import { get } from '@/util/http.js'
export default {
  data () {
    return {
      list: [],
      levelList: {
        0: '无灾害',
        1: '轻度',
        2: '中度',
        3: '重度',
        4: '特重'
      },
      bgLevel: {
        4: 1,
        3: 1,
        2: 2,
        1: 3,
        0: 4
      }
    }
  },
  // watch: {
  //   activeType () {
  //     this.getDiseaseStatistics()
  //     this.getDiseaseTrend()
  //     this.getDiseaseDistribute()
  //     this.getFarmlandDisease()
  //   },
  //   currentFarmlandId () {
  //     this.getDiseaseStatistics()
  //     this.getDiseaseTrend()
  //   }
  // },
  computed: {
    // ...mapState('subject-disease', ['types', 'activeType', 'loading', 'diseaseStatistics', 'diseaseTrend', 'diseaseDistribute', 'farmlandDisease']),
    // ...mapGetters('common', ['getDictItemNameById']),
    colorChange () {
      return colorChange
    }
  },
  methods: {
    // ...mapActions('subject-disease', ['getDiseaseStatistics', 'getDiseaseTrend', 'getDiseaseDistribute', 'getFarmlandDisease']),
    // ...mapMutations('subject-disease', ['setActiveType']),
    // 获取列表信息
    async getList () {
      const data = await get({ url: '/pests_suggest/list', params: {} })
      this.list = data
    }
  },
  created () {
    this.getList()
    // this.getDiseaseStatistics()
    // this.getDiseaseTrend()
    // this.getDiseaseDistribute()
    // this.getFarmlandDisease()
  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-disease {
  width: 308px;
  height: 780px;
  margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
    .title-area {
      height: 23px;
      line-height: 23px;
      margin-bottom: 10px;
      margin-top: 21px;
      .title {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .subtitle {
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #888c96;
        text-align: right;
      }
    }
    .info-box-1 {
      height: 84px;
      position: relative;
      .status-box {
        width: 133px;
        height: 84px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
        border-radius: 5px 5px 5px 5px;
      }
      .status-label {
        font-size: 12px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #888c96;
        position: absolute;
        left: 14px;
        top: 18px;
      }
      .status-value {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #369afe;
        position: absolute;
        left: 14px;
        top: 45px;
      }
      .status-icon {
        width: 21.5px;
        height: 21.5px;
        position: absolute;
        left: 88px;
        top: 45px;
      }
      .level-bg {
        position: absolute;
        right: 13px;
        bottom: -11px;
        width: 100px;
        height: 100px;
      }
      .status-value2 {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #089bab;
        position: absolute;
        left: 187px;
        top: 20.5px;
        text-align: center;
        span {
          visibility: hidden;
        }
        &::after {
          content: "灾害等级";
          font-size: 10px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #8a94a6;
          display: block;
        }
      }
      .status-value3 {
        font-size: 10px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        width: 39px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        position: absolute;
        left: 192px;
        bottom: 8.5px;
      }
    }
  }
}
</style>
